<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>业主注册</title>
<link href="${initParam.url }/statics/css/register.css" rel="stylesheet">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>
	
	<script src="${initParam.url}/statics/js/jquery-1.12.4.js"></script>
	<script>
	
		$(document).ready(function(){
		
			//提交表单,调用验证函数u
			$("#btn").submit(function(){
				var flag = true;
				if (!checkUsername()) flag = false;
				if (!checkEmail()) flag = false;
				if (!checkPass()) flag = false;
				if (!checkPassword()) flag = false;
				return flag;
			})
			$("#username").blur(function() {
				$.get("check", {
					username : $(this).val()
				}, function(data) {
					if (data > 0)
						$("#DivUsername").text("用户名存在");
					else
						$("#DivUsername").text("");
				})
			})
			//绑定失去焦点事件
			$("#username").blur(checkUsername);
			$("#email").blur(checkEmail);
			$("#pass").blur(checkPass);
			$("#password").blur(checkPassword);
		})

        //验证名字
		function checkUsername() {
			var $fname = $("#username");
			var $divID = $("#DivUsername");
			$divID.html("");
			if ($fname.val() == "") {
				$divID.html("用户名不能为空");
				return false;
			}
			
			return true;
		}

		//验证Email
		function checkEmail() {
			var $mail = $("#email");
			var $divID = $("#DivEmail");
			$divID.html("");
			if ($mail.val() == "") {
				$divID.html("Email不能为空");
				return false;
			}
			if ($mail.val().indexOf("@") == -1) {
				$divID.html("Email格式不正确");
				return false;
			}
			if ($mail.val().indexOf(".") == -1) {
				$divID.html("Email格式不正确");
				return false;
			}
			
			return true;
		}
		//验证密码
		function checkPass() {
			var $pwd = $("#pass");
			var $divID = $("#DivPass");
			$divID.html("");
			if ($pwd.val() == "") {
				$divID.html("密码不能为空");
				return false;
			}
			if ($pwd.val().length < 6) {
				$divID.html("密码必须等于或大于6个字符");
				return false;
			}
			return true;
		}
		//验证重复密码
		function checkPassword() {
			var $pwd = $("#pass"); //输入密码
			var $repwd = $("#password");  //再次输入密码
			var $divID = $("#DivPassword");
			$divID.html("");
			if ($pwd.val() != $repwd.val()) {
				$divID.html("两次输入的密码不一致");
				return false;
			}
			return true;
		}
	</script>
	
</head>
<body>
	<div class="re">
		<div class="div">
			<span class="yz"></span><span class="pt"></span><br /> <span
				class="zc"></span>

			<div class="re-1">
			<form action="doregister" method="post" id="btn">
				<table>
					<tr>
						<td>用户名:</td>
						<td ><input name="username" id="username"  type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1"><td><span id='DivUsername'></span></td></td>
						
					</tr>
					<tr>
						<td>密码:</td>
						<td ><input name="pass" id="pass"  type="password" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1"><td><span id='DivPass'></span></td></td>
					</tr>
					<tr>
						<td>确认密码:</td>
						<td ><input name="password"  id="password"  type="password" class="form-control" placeholder="请再次输入密码" aria-describedby="basic-addon1"><td><span id='DivPassword'></span></td></td>
					</tr>
					<tr>
						<td>邮箱:</td>
						<td><input name="email"  id="email" type="text" class="form-control" placeholder="请输入邮箱号码" aria-describedby="basic-addon1"><td><span id='DivEmail'></span></td></td>
					</tr>
					<tr>
						<td  colspan="2">
						<div class="btn-group" role="group" aria-label="...">
							<button type="button" class="btn btn-default" onclick="window.location.href='${initParam.url}/login'" id="fanhui">返回登录</button>
						</div>
						<div class="btn-group" role="group" aria-label="...">		
							<button type="" class="btn btn-default" id="fanhuia">提交</button>
						</div>
						</td>
					</tr>
				</table>
				</form>
			</div>
		</div>
	</div>
</body>
</html>